<template>
  <el-row>
    <el-col :span="24" v-if="showQuery">
      <slot name="showQuery"></slot>
    </el-col>
    <el-col :span="24">

      <el-row :gutter="24">

        <el-col :span="15">
          <slot name="buttonGroup"></slot>
        </el-col>
        <el-col :span="9">

          <div class="ml-4" style="position: relative;
    float: right;">
            <el-tooltip
                effect="dark"
                content="显隐列"
                placement="top-end" v-if="isColumnsShow"
            >
              <el-button circle>
                <el-icon><Grid /></el-icon>
              </el-button>
            </el-tooltip>

            <el-tooltip
                effect="dark"
                content="刷新"
                placement="top-end" v-if="refreshClick"
            >
            <el-button circle @click="refreshClick">
              <el-icon :class="{'is-loading':spinning}">
                <Refresh/>
              </el-icon>
            </el-button>
            </el-tooltip>
            <el-tooltip
                effect="dark"
                :content="showQuery?'隐藏搜索':'显示搜索'"
                placement="top-end"
            >
              <el-button circle @click="showQueryClick">
                <el-icon>
                  <ZoomOut v-if="showQuery&&$slots.showQuery"/>
                  <ZoomIn    v-if="!showQuery&&$slots.showQuery" />
                </el-icon>
              </el-button>

            </el-tooltip>
          </div>

        </el-col>
      </el-row>
    </el-col>
    <el-col :span="24">
      <el-table :data="tableData.records" table-layout="fixed" :stripe="true" :border="true" v-loading="spinning"
                :highlight-current-row="true" style="width: auto" header-row-class-name="etable" height="65vh"
                :fit="true"
                @sort-change="sortChange"
      >


        <slot name="tableColumn"></slot>
      </el-table>

    </el-col>
    <el-col :span="24">
      <el-pagination
          style="margin-top: 10px"
          :total="tableData.total"
          layout="->,sizes,total, prev, pager, next, jumper"
          v-model:current-page="tableData.current"
          v-model:page-size="tableData.size"
          :page-sizes="[10, 20,50, 100]"
          :size="size"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue';
import type {TableInstance, ComponentSize} from "element-plus";

/** 分页设置开始 */


const size = ref<ComponentSize>('default')
/** 分页设置结束 */

const showQuery = ref(false);
const emit = defineEmits(["refreshClick", "sortChange"]);
//是否展示过滤列按钮
let isColumnsShow = defineModel('isColumnsShow')
//列表加载
let spinning = defineModel('spinning')
//过滤列数据
let isColumnsList = defineModel('isColumnsList')
//列表数据
let tableData: any = defineModel('tableData')
//分页配置数据
let pageConfig: any = defineModel('pageConfig')

function showQueryClick() {
  showQuery.value = !showQuery.value
}



function refreshClick(){
  emit("refreshClick")
}
/**
 * page-size 改变时触发
 */
const handleSizeChange = (val: number) => {
  pageConfig.value.sizeChange = val;
  emit("refreshClick")

}


/**
 * current-page 改变时触发
 */
const handleCurrentChange = (val: number) => {
  pageConfig.value.currentChange = val;
  emit("refreshClick")
}
const sortChange = (v) => {
  console.log(v)
  emit("sortChange")
}


</script>


<style scoped>

</style>